import React, { Component } from 'react';
import classNames from 'classnames';
import { Row, Col, Select, Input, Form, Button } from 'antd';
const Option = Select.Option;
import { SimpleOptions } from '../constant/options';

import noop from 'util/noop';

class Search extends Component {
    static defaultProps = {
        resetPagination: noop,
        queryOrderList: noop
    }


    render() {
        const { form: { getFieldDecorator, getFieldValue } } = this.props;

        const btnCls = classNames('ant-search-btn', 'simple-search-btn', {
            'ant-search-btn-noempty': !!getFieldValue('simpleValue')
        });


        const simpleTypeField = getFieldDecorator('simpleType', {
            initialValue: 'tid'
        })(
            <Select className="percent100"
                size="large">
                {
                    SimpleOptions.map(option => <Option {...option}>{option.text}</Option>)
                }
            </Select>
            );

        const simpleValueField = getFieldDecorator('simpleValue')(
            <Input size="large"
                onPressEnter={() => this.query()} />
        );

        return (
            <Form className="search-form">
                <div className="simple-search">
                    <div className="ant-search-input-wrapper">
                        <Row className="search-select">
                            <Col span="6" className="search-item">
                                <Row className="select-and-input">
                                    <Col span="8">{simpleTypeField}</Col>
                                    <Col span="16">{simpleValueField}</Col>
                                    <Button icon="search"
                                        className={btnCls}
                                        onClick={() => this.query()} />
                                </Row>
                            </Col>
                        </Row>
                    </div>
                </div>
            </Form>
        )
    }


    /**
     * 点击回车键查询订单列表
     */
    query = () => {
        const {queryOrderList, resetPagination, form: {getFieldsValue}} = this.props;
        let {simpleType, simpleValue} = getFieldsValue();

        resetPagination();
        queryOrderList({[simpleType]: simpleValue});
    }
}

export default Search;